<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>选择房间</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />

        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
        />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body class="bg-light">
        <div class="p-5">
            <div class="d-flex justify-content-center">
                <div class="card room-card">
                    <div class="card-header bg-success bg-gradient text-light">
                        <div class="text-center fs-4">
                            <i class="bi bi-chat-dots-fill"></i>
                            <span>聊添</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="chat.html" method="GET">
                            <div class="mb-3">
                                <label class="form-label">姓名</label>
                                <input
                                    type="text"
                                    name="name"
                                    class="form-control"
                                    placeholder="请输入姓名"
                                />
                            </div>

                            <div class="mb-3">
                                <label class="form-label">房间</label>
                                <select class="form-select" name="room">
                                    <option value="javascript">
                                        javascript
                                    </option>
                                    <option value="php">php</option>
                                    <option value="nodejs">nodejs</option>
                                    <option value="react">react</option>
                                </select>
                            </div>

                            <button class="btn btn-success w-100" type="submit">
                                加入聊天
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
